<script setup lang='ts'>
import { useGetEnterpriseInfo } from '@fl/api/mall-api'
import { SearchForm } from '@fl/components'
import { useRoute } from 'vue-router'

const { params } = useRoute()

const id = computed(() => params.id)
const { data, isLoading } = useGetEnterpriseInfo(id)

const columns1 = [
    {
        colProps: {
            span: 24,
        },
        label: '企业类型',
        prop: 'type',
        valueType: 'text',
    },
    {
        colProps: {
            span: 24,
        },
        label: '经营范围',
        prop: 'businessScope',
        valueType: 'text',
    },

]

const columns2 = [
    {
        colProps: {
            span: 24,
        },
        label: '公司地址',
        prop: 'registeredAddress',
        valueType: 'text',
    },
]
</script>

<template>
    <ElSkeleton v-if="isLoading"
                :rows="5"
    />

    <div v-else
         class="p-40 w-full"
    >
        <div class="p-20 mx-auto mb-20 bg-#fff w-1300">
            <div class="mb-10 text-20 text-#1D2129 font-bold">
                {{ data?.enterpriseName }}
            </div>

            <div class="mb-20">
                注册时间:{{ data?.establishmenDate }} &nbsp; | &nbsp;
                注册资金:{{ data?.registeredCapital }} &nbsp; | &nbsp;
                注册地址:{{ data?.registeredAddress }}
            </div>

            <div class="mb-20 bg-#ccc h-1" />

            <SearchForm v-model="data"
                        :columns="columns1"
                        :has-footer="false"
            />
        </div>

        <div class="p-20 mx-auto mb-20 bg-#fff w-1300">
            <div class="mb-20 text-20 text-#1D2129 font-bold">
                公司信息
            </div>

            <div class="mb-20 bg-#ccc h-1" />

            <el-image style="width: 150px; height: 150px"
                      :src="data.logo?.split(';')?.[0]"
                      :preview-src-list="data.logo?.split(';')"
                      fit="cover"
            >
                <template #error>
                    <div style="width: 150px; height: 150px"
                         class="flex justify-center items-center"
                    >
                        暂无图片
                    </div>
                </template>
            </el-image>

            <SearchForm v-model="data"
                        :columns="columns2"
                        :has-footer="false"
                        class="mb-20"
            />

            <div class="mb-20 text-20 text-#1D2129 font-bold">
                资质证书
            </div>

            <div class="mb-20 bg-#ccc h-1" />

            <div class="flex gap-50">
                <el-image style="width: 240px; height: 335px"
                          :src="data.businessLicense?.split(';')?.[0]"
                          :preview-src-list="data.businessLicense?.split(';')"
                          fit="cover"
                >
                    <template #error>
                        <div style="width: 240px; height: 335px"
                             class="flex justify-center items-center"
                        >
                            暂无图片
                        </div>
                    </template>
                </el-image>
            </div>
        </div>
    </div>
</template>
